<template>
  <div>
    <el-card>
      <template #header>
        <b>分类</b>
      </template>
      <pie-chart height="200px" :chart-data="salesWithCategoryChartData" />
    </el-card>
    <br />
    <el-card>
      <template #header>
        <b>年份</b>
      </template>
      <el-date-picker v-model="year" type="year" placeholder="请选择一年" @change="handleChangeYear" />
      <line-chart height="200px" :chart-data="salesPerYearChartData" />
    </el-card>
    <br />
    <el-card>
      <template #header>
        <b>月份</b>
      </template>
      <el-date-picker v-model="month" type="month" placeholder="请选择一月" @change="handleChangeMonth" />
      <line-chart height="200px" :chart-data="salesPerMonthChartData" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getSalesWithCategory, getSalesPerYear, getSalesPerMonth } from '@/api/souvenir/order'
import LineChart, { lineChartData } from '@/components/LineChart/index.vue'
import PieChart, { pieChartData } from '@/components/PieChart/index.vue'
const salesWithCategoryChartData = ref({
  chartName: '销售额',
  data: []
})
const salesPerYearChartData = ref<lineChartData>({
  xAxisData: [],
  yAxis: [
    {
      yAxisName: '销售额',
      yAxisData: [],
      yAxisSeries: {
        smooth: false,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    }
  ]
})
const salesPerMonthChartData = ref<lineChartData>({
  xAxisData: [],
  yAxis: [
    {
      yAxisName: '销售额',
      yAxisData: [],
      yAxisSeries: {
        smooth: false,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    }
  ]
})

const year = ref(new Date())
const handleChangeYear = () => {
  getSalesPerYearChartData()
}
const getSalesPerYearChartData = async () => {
  try {
    const { data } = await getSalesPerYear({ year: year.value })
    salesPerYearChartData.value.xAxisData = data.month
    salesPerYearChartData.value.yAxis[0].yAxisData = data.data
  } catch (error) {}
}
const month = ref(new Date())
const handleChangeMonth = () => {
  getSalesPerMonthChartData()
}
const getSalesPerMonthChartData = async () => {
  try {
    const { data } = await getSalesPerMonth({ month: month.value })
    salesPerMonthChartData.value.xAxisData = data.day
    salesPerMonthChartData.value.yAxis[0].yAxisData = data.data
  } catch (error) {}
}
onMounted(async () => {
  try {
    const { data } = await getSalesWithCategory()
    salesWithCategoryChartData.value.data = data.data
  } catch (error) {}
  getSalesPerYearChartData()
  getSalesPerMonthChartData()
})
</script>

<style scoped></style>
